<div>
  <!-- 步骤条 -->
  <el-steps :active="activeStep" finish-status="success">
    <el-step title="第一步" description="基本信息"></el-step>
    <el-step title="第二步" description="商品图片"></el-step>
    <el-step title="第三步" description="商品内容"></el-step>
  </el-steps>

  <!-- 标签页

  -->
  <el-tabs
    :tab-position="tabPosition"
    @tab-click="changeTab"
    v-model="activeName"
  >
    <!--第一个 -->
    <el-tab-pane label="基本信息" name="first">
      <!-- 基本信息页 -->
      <el-form ref="form" :model="infoForm" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="infoForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="infoForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品重量">
          <el-input v-model="infoForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="infoForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <!-- 级联选择器 -->
          <el-cascader
            :options="options"
            change-on-select
            :props="defaultProps"
            v-model="infoForm.goods_cat"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="是否促销">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <!-- 下一步 -->
        <el-button type="primary" @click="toNextStep('second',2)"
          >下一步</el-button
        >
      </el-form>
    </el-tab-pane>
    <!-- 第二个：上传图片：
    action:上传图片的地址(接口地址),需要加上基路径
on-success:是组件提供的一个属性，可以绑定一个方法,在图片上传成功之后触发
    -->
    <el-tab-pane label="商品图片" name="second">
      <el-upload
        action="http://localhost:8888/api/private/v1/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="uploadSuccess"
        :headers="headers"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- 图片预览 -->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>

      <el-button type="primary" @click="toNextStep('third',3)"
        >下一步</el-button
      >
    </el-tab-pane>
    <el-tab-pane label="商品内容" name="third" class="father1">
      <!-- bidirectional data binding（双向数据绑定） -->
      <quill-editor
        v-model="infoForm.goods_introduce"
        ref="myQuillEditor"
        :options="editorOption"
      >
      </quill-editor>
      <el-button type="primary" @click="addGoods">确定</el-button>
    </el-tab-pane>
  </el-tabs>
</div>
